<template>
  <div class="table-container">
    <slot></slot>
    <!-- table 表格 -->
    <div v-if="!fetching">
      <!-- <div class="no-scrollbar scroll-x"> -->
      <table class="table_2" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th
              v-for="(headerItem, index) in header"
              :class="[
                index != 0
                  ? index + 1 == header.length
                    ? 'col-end'
                    : 'flex-1'
                  : 'col-start',
              ]"
              :key="headerItem.key"
              :style="{}"
            >
              {{ $t(headerItem.name) }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            :class="index % 2 == 0 ? 'white-bg' : 'gray-bg'"
            v-for="(item, index) in data"
            :key="index"
          >
            <td
              v-if="item.service_code_rowspan"
              :rowspan="item.service_code_rowspan"
              :class="RowspanBg(item)"
            >
              {{ item.service_code }}
            </td>
            <td
              v-if="item.country_title_rowspan"
              :rowspan="item.country_title_rowspan"
              :class="RowspanBg(item)"
            >
              {{ item.country_title }}
            </td>
            <td
              v-if="item.airport_title_rowspan"
              :rowspan="item.airport_title_rowspan"
              :class="RowspanBg(item)"
            >
              {{ item.airport_title }}
            </td>
            <td>{{ item.airmodel_title }}</td>
            <td>
              <div class="starter_type">
                <ul>
                  <li v-for="(engine, index) in item.engine" :key="index">
                    {{ engine.engine_title }}
                  </li>
                </ul>
              </div>
            </td>
            <td>
              <div
                class="h-100"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <IconConsult @click="consult(item)" />
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- </div> -->
    </div>
    <template v-else>
      <div class="pc-skeleton">
        <Skeleton pc gap-skeleton block v-for="i in 12" :key="i"></Skeleton>
      </div>
      <div class="mobile-skeleton">
        <Skeleton mobile gap-skeleton block v-for="i in 6" :key="i"></Skeleton>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed, inject, nextTick, ref, watch } from "vue";
import type { TableHeaderItem, TableRowItem } from "../../types/table";

type Props = {
  header: TableHeaderItem[];
  data: TableRowItem[];
  className: string;
  type: string;
};
const props = defineProps<Props>();
const fetching = inject("fetching");

const emits = defineEmits(["consult"]);
const consult = (data) => {
  let obj = {
    id: data.id,
    service_code: data.service_code,
    type: props.type,
    country_title: data.country_title,
    airport_title: data.airport_title,
    airmodel_title: data.airmodel_title,
    engine_title: data.engine.join(","),
  };
  emits("consult", obj);
};

const service_code_Index = ref(0);
const service_code_arr: any[] = [];
props.data.map((item) => {
  if (!service_code_arr.includes(item.service_code))
    service_code_arr.push(item.service_code);
});

const RowspanBg = computed(() => {
  return (item, key = "service_code") => {
    let className = "";
    let index = service_code_arr.findIndex((value) => value == item[key]);
    className = index % 2 == 0 ? "white-bg" : "gray-bg";
    return className;
  };
});
</script>
<style scoped lang="less">
.table {
  .table-header {
    color: #fff;
    background-color: var(--yd-primary-color);
  }
}
table {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: rgb(104, 104, 104);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  td,
  th {
    padding: 8px;
  }
  thead {
    background-color: var(--yd-primary-color);
    color: #fff;
    th {
      border-right: 1px solid #fff;
      &:last-child {
        border-right-width: 0;
      }
    }
  }

  tbody {
    tr {
      &:not(:last-child) {
        border-bottom: 1px solid #eee;
      }
      td {
        border-right: 1px solid #fff;
        height: 1px;
        &:last-child {
          border-right-width: 0;
        }
        & > div {
          height: 100%;
          display: flex;
          flex-direction: column;
          div {
            flex: 1;
            display: inherit;
            align-items: center;
            justify-content: center;
            flex-direction: column;
          }
        }
      }
      &.white-bg {
        td {
          border-color: rgba(240, 240, 240, 1);
        }
      }
    }
    tr,
    td {
      &.white-bg {
        background-color: #fff;
      }
      &.gray-bg {
        background-color: #d1dde9;
      }
    }
  }
}
.table_2 {
  .col-start {
    width: 100px;
  }
  .col-end {
    width: 213px;
  }
  .starter_type {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    li {
      list-style-type: disc;
    }
  }
}

@media screen and (max-width: 768px) {
  .table_2 {
    thead {
      white-space: nowrap;
    }
    // width: 300%;
    font-size: 45px !important;
    // td,
    // th {
    //   padding: 40px 100px!important;
    // }
    .starter_type li {
      list-style: none;
    }
  }
}
</style>
